<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask HTML</title>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
</head>
<body>
    <div id="download" class="container mt-5">
        <form id="videoForm" action="/getVideoMsg" method="post">
            <div class="form-group">
                <input id="video_input" type="text" class="form-control" name="video_input" placeholder="Enter video URL">
            </div>
            <button type="submit" class="btn btn-primary" onclick="getUrl()">Submit</button>
        </form>

    </div>
    <!-- <iframe name="result_frame" id="result_frame" width="100%" height="400" frameborder="0"></iframe> -->
    {% if status == 1 %}
        <div class="container mt-5" id="success">
            <h1>Success</h1>
            <div class="form-group">
                    <label for="videoSelect">Select a video:</label>
                    <form action="/getVideo" method="post">
                    <select class="form-control" id="videoSelect" name="videoForm">
                        <option value="">--Please choose an option--</option>
                        {% for option in options %}
                            <option name="option" value="{{option[0]}}">{{ option[-1] }} - {{option[1]}}</option>
                        {% endfor %}
                    </select>
                    
                    <!-- <input type="submit" class="btn btn-primary" value="Download"> -->
                    <button type="submit" class="btn btn-primary">Download</button>
                </form>
            </div>
        </div>
    {% elif status == 0 %}
        <div class="container mt-5" id="fail">
            <h1>Request Failed</h1>
            <p>Sorry, the request failed. Please try again.</p>
        </div>
    {%elif status == 2%}
        <div></div>
    {% endif %}
    
   

    <!-- <script src="../static/js/axios.min.js"></script> -->
    <script>
        function isValidURL(url) {
            // 创建一个正则表达式模式，用于验证URL
            var pattern = /^(https?:\/\/)?(www\.)?([\w-]+\.)+[\w]+(\/[\w- ./?%&=]*)?$/;

            // 使用正则表达式测试输入的URL
            return pattern.test(url);
        }
        function getUrl(){
            // 获取url
            let url_input = document.getElementById("video_input")
            let url = url_input.value
            // 判断url是否合法
            return isValidURL(url)
        }
    </script>

  <style>
    #download{
        margin-top: 200px;
    }
    button{
        margin-top: 20px;
    }
  </style>
</html>
